import '../index.scss';
import { useSelector, useDispatch } from 'react-redux';
// 导入 创建action的方法
import { addition, subtraction, addToNum10 } from '../store/modules/counterStore';
import { fetchChannelList } from '../store/modules/channelStore';
import { useEffect } from 'react';


interface RootState {
    counter: {
        count: number;
    };
}

interface ChannelState {
    channel: {
        channelList: ChannelItem[];
    };
}

interface ChannelItem {
    id: number;
    name: string;
}

const App = () => {
    // 为 useSelector 的 state 参数指定类型
    const { count } = useSelector((state: RootState) => state.counter);
    const { channelList } = useSelector((state: ChannelState) => state.channel)

    // 得到 dispatch 方法
    const dispatch = useDispatch();

    // useEffect 执行异步方法
    useEffect(() => {
        dispatch(fetchChannelList())
    }, [dispatch])

    return (
        <div className="app">
            <button onClick={() => dispatch(addition())}>+</button>
            <span>{count}</span>
            <button onClick={() => dispatch(subtraction())}>-</button>
            <button onClick={() => dispatch(addToNum10(10))}>+10</button>
            <ul>
                {channelList.map(item => (
                    <li key={item.id}>{item.name}</li>
                ))}

            </ul>
        </div>
    );
};

export default App;